<template>
  <div class="study-data">
    <AppHeader />

    <main class="main-content">
      <div class="container">
        <div class="page-header">
          <h1>学习数据</h1>
          <p>查看您的学习进度和统计信息</p>
        </div>

        <div class="data-overview">
          <div class="overview-cards">
            <div class="stat-card">
              <div class="stat-icon">
                <el-icon size="32" color="#409eff"><Clock /></el-icon>
              </div>
              <div class="stat-content">
                <h3>{{ totalStudyTime }}</h3>
                <p>总学习时长（小时）</p>
              </div>
            </div>

            <div class="stat-card">
              <div class="stat-icon">
                <el-icon size="32" color="#67c23a"><Trophy /></el-icon>
              </div>
              <div class="stat-content">
                <h3>{{ completedPlans }}</h3>
                <p>完成的学习计划</p>
              </div>
            </div>

            <div class="stat-card">
              <div class="stat-icon">
                <el-icon size="32" color="#e6a23c"><TrendCharts /></el-icon>
              </div>
              <div class="stat-content">
                <h3>{{ studyDays }}</h3>
                <p>累计学习天数</p>
              </div>
            </div>

            <div class="stat-card">
              <div class="stat-icon">
                <el-icon size="32" color="#f56c6c"><DataLine /></el-icon>
              </div>
              <div class="stat-content">
                <h3>{{ focusScore }}</h3>
                <p>专注度评分</p>
              </div>
            </div>
          </div>
        </div>

        <div class="data-content">
          <div class="charts-section">
            <div class="chart-card">
              <h3>每日学习时长</h3>
              <div class="chart-placeholder">
                <el-icon size="60" color="#409eff"><TrendCharts /></el-icon>
                <p>过去7天的学习时长趋势</p>
              </div>
            </div>

            <div class="chart-card">
              <h3>学习计划完成度</h3>
              <div class="chart-placeholder">
                <el-icon size="60" color="#67c23a"><PieChart /></el-icon>
                <p>本月学习计划完成情况</p>
              </div>
            </div>
          </div>

          <div class="details-section">
            <div class="detail-card">
              <h3>最近学习记录</h3>
              <div class="study-records">
                <div
                  v-for="record in studyRecords"
                  :key="record.id"
                  class="record-item"
                >
                  <div class="record-time">{{ formatDate(record.date) }}</div>
                  <div class="record-content">
                    <h4>{{ record.subject }}</h4>
                    <p>学习时长: {{ record.duration }}分钟</p>
                  </div>
                  <div class="record-score">
                    <el-tag :type="getScoreType(record.score)"
                      >{{ record.score }}分</el-tag
                    >
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>

    <AppFooter />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import {
  Clock,
  Trophy,
  TrendCharts,
  DataLine,
  PieChart,
} from "@element-plus/icons-vue";

const totalStudyTime = ref(125);
const completedPlans = ref(12);
const studyDays = ref(45);
const focusScore = ref(85);

const studyRecords = ref([
  {
    id: 1,
    date: "2024-01-15",
    subject: "数学复习",
    duration: 120,
    score: 88,
  },
  {
    id: 2,
    date: "2024-01-14",
    subject: "英语单词",
    duration: 90,
    score: 92,
  },
  {
    id: 3,
    date: "2024-01-13",
    subject: "编程练习",
    duration: 180,
    score: 85,
  },
]);

const formatDate = (dateStr: string) => {
  const date = new Date(dateStr);
  return `${date.getMonth() + 1}月${date.getDate()}日`;
};

const getScoreType = (score: number) => {
  if (score >= 90) return "success";
  if (score >= 80) return "warning";
  return "danger";
};
</script>

<style scoped>
.study-data {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.main-content {
  flex: 1;
  padding: 40px 0;
}

.page-header {
  margin-bottom: 40px;
  text-align: center;
}

.page-header h1 {
  margin: 0 0 8px 0;
  color: #2c3e50;
  font-size: 2.5rem;
}

.page-header p {
  margin: 0;
  color: #7f8c8d;
  font-size: 1.1rem;
}

.overview-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  margin-bottom: 40px;
}

.stat-card {
  background: white;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  gap: 16px;
}

.stat-content h3 {
  margin: 0 0 4px 0;
  font-size: 1.8rem;
  color: #2c3e50;
}

.stat-content p {
  margin: 0;
  color: #7f8c8d;
  font-size: 14px;
}

.data-content {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 30px;
}

.charts-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.chart-card {
  background: white;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.chart-card h3 {
  margin: 0 0 20px 0;
  color: #2c3e50;
}

.chart-placeholder {
  text-align: center;
  padding: 40px;
  color: #7f8c8d;
}

.detail-card {
  background: white;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.detail-card h3 {
  margin: 0 0 20px 0;
  color: #2c3e50;
}

.study-records {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.record-item {
  display: flex;
  align-items: center;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
  gap: 16px;
}

.record-time {
  color: #909399;
  font-size: 14px;
  min-width: 60px;
}

.record-content {
  flex: 1;
}

.record-content h4 {
  margin: 0 0 4px 0;
  color: #2c3e50;
  font-size: 16px;
}

.record-content p {
  margin: 0;
  color: #7f8c8d;
  font-size: 14px;
}

@media (max-width: 768px) {
  .data-content {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .overview-cards {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
  }

  .stat-card {
    flex-direction: column;
    text-align: center;
  }
}
</style>
